<template>
  <a-spin :spinning="confirmLoading">
      <!-- 主表单区域 -->
      <a-form-model ref="ruleForm" :labelCol="labelCol" :wrapperCol="wrapperCol" :model="formData" :rules="validatorRules">
        <a-row>
          <a-col :span="8" >
            <a-form-model-item label="客户编码" prop="ownerCode" >
              <a-input disabled v-model="formData.ownerCode" placeholder="请输入客户编码"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="客户名称" prop="ownerName" >
              <a-input @change="handleChangeOwnerName" v-model="formData.ownerName" placeholder="请输入客户名称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="客户简称" prop="ownerName" >
              <a-input @change="handleChangeOwnerName" v-model="formData.ownerName" placeholder="请输入客户简称"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item  label="所属行业" prop="ownerTrade" >
              <j-dict-select-tag type="list" v-model="formData.ownerTrade" dictCode="park_customer_trade" placeholder="请选择所属行业"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item  label="企业性质" prop="ownerNature" >
              <j-dict-select-tag type="list" v-model="formData.ownerTrade" dictCode="qs_park_customer_nature" placeholder="请选择企业性质"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="资产总额" prop="ownerName" >
              <a-input @change="handleChangeOwnerName" v-model="formData.ownerName" placeholder="请输入资产总额"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="负债总额" prop="ownerName" >
              <a-input @change="handleChangeOwnerName" v-model="formData.ownerName" placeholder="请输入负债总额"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8" >
            <a-form-model-item label="年收入额" prop="annualIncome" >
              <a-input v-model="formData.annualIncome" placeholder="请输入年收入额"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="是否高新技术企业" >
              <j-switch v-model="formData.isTechnology"></j-switch>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="联系人" prop="contact" >
              <a-input v-model="formData.contact" placeholder="请输入联系人"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="联系人地址" prop="contactAddr" >
              <a-input v-model="formData.contactAddr" placeholder="请输入联系人地址"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="联系电话" prop="contactTel" >
              <a-input v-model="formData.contactTel" placeholder="请输入联系人地址"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :labelCol="labelCol2"  :wrapperCol="wrapperCol2" label="主要产品" prop="contact" >
              <a-input v-model="formData.contact" placeholder="请输入主要产品"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :labelCol="labelCol2"  :wrapperCol="wrapperCol2" label="主要客户类型" prop="contactAddr" >
              <a-input v-model="formData.contactAddr" placeholder="请输入主要客户类型"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :labelCol="labelCol2"  :wrapperCol="wrapperCol2" label="主要供应商类型" prop="contactTel" >
              <a-input v-model="formData.contactTel" placeholder="请输入主要供应商类型"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <a-divider orientation="left" >业主工商信息</a-divider>
      <xy-park-ownerbusiness-form ref="xyParkOwnerbusinessForm" @validateError="validateError" :disabled="formDisabled"></xy-park-ownerbusiness-form>
      <!-- 子表单区域 -->
    <a-tabs v-model="activeKey" @change="handleChangeTabs">
      <a-tab-pane tab="主要负责人" :key="refKeys[0]" :forceRender="true">
        <j-editable-table
          :ref="refKeys[0]"
          :loading="xyParkOwnercontactTable.loading"
          :columns="xyParkOwnercontactTable.columns"
          :dataSource="xyParkOwnercontactTable.dataSource"
          :maxHeight="300"
          :disabled="formDisabled"
          :rowNumber="true"
          :rowSelection="true"
          :actionButton="true"/>
      </a-tab-pane>
      <a-tab-pane tab="历史沿革" :key="refKeys[1]" :forceRender="true">
        <j-editable-table
          :ref="refKeys[1]"
          :loading="xyHistoryTable.loading"
          :columns="xyHistoryTable.columns"
          :dataSource="xyHistoryTable.dataSource"
          :maxHeight="300"
          :disabled="formDisabled"
          :rowNumber="true"
          :rowSelection="true"
          :actionButton="true"/>
      </a-tab-pane>
      <a-tab-pane tab="所有者权益" :key="refKeys[2]" :forceRender="true">
        <j-editable-table
          :ref="refKeys[2]"
          :loading="xyOwnerEquityTable.loading"
          :columns="xyOwnerEquityTable.columns"
          :dataSource="xyOwnerEquityTable.dataSource"
          :maxHeight="300"
          :disabled="formDisabled"
          :rowNumber="true"
          :rowSelection="true"
          :actionButton="true"/>
      </a-tab-pane>
    </a-tabs>
  </a-spin>
</template>

<script>

import pick from 'lodash.pick'
import { FormTypes, getRefPromise } from '@/utils/JEditableTableUtil'
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'
import { validateDuplicateValue } from '@/utils/util'
import XyParkOwnerbusinessForm from './XyParkOwnerbusinessForm.vue'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import JSwitch from '@/components/jeecg/JSwitch'
export default {
  name: 'XyParkCustomerProfileForm',
  mixins: [JEditableTableMixin],
  components: {
    XyParkOwnerbusinessForm,
    JDictSelectTag,
    JSwitch
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 9 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 21 }
      },
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 1,
      validatorRules: {
        ownerCode: [
          { required: true, message: '请输入业主编码!', trigger: 'change' },
          { validator: (rule, value, callback) => validateDuplicateValue('xy_park_owner', 'owner_code', value, this.model.id, callback), trigger: 'change' }
        ],
        ownerName: [
          { required: true, message: '请输入业主名称!', trigger: 'change' }
        ],
        idCard: [
          { required: true, message: '请输入身份证号', trigger: 'change' }
        ],
        ownerType: [
          { required: true, message: '请输入业主类型!', trigger: 'change' }
        ],
        ownerTrade: [
          { required: true, message: '请输入所属行业!', trigger: 'change' }
        ],
        isLogon: [
          { required: true, message: '请输入是否注册园区!', trigger: 'change' }
        ],
        isTechnology: [
          { required: true, message: '请输入是否科技型企业!', trigger: 'change' }
        ],
        contact: [
          { required: true, message: '请输入联系人', trigger: 'change' }
        ],
        contactAddr: [
          { required: true, message: '请输入联系人地址', trigger: 'change' }
        ],
        contactTel: [
          { required: true, message: '请输入联系电话', trigger: 'change' }
        ]
      },
      refKeys: ['xyParkOwnercontact', 'xyHistory', 'xyOwnerEquity'],
      tableKeys: ['xyParkOwnercontact', 'xyHistory', 'xyOwnerEquity'],
      activeKey: 'xyParkOwnercontact',
      // 业主联系人信息
      xyParkOwnercontactTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '负责人',
            key: 'contacts',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          {
            title: '负责人职务',
            key: 'contactsw',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: ''
          },
          {
            title: '联系电话',
            key: 'contactTel',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          {
            title: '电子邮箱',
            key: 'email',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ pattern: 'e', message: '${title}格式不正确' }]
          },
          {
            title: '职位',
            key: 'position',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: ''
          }
        ]
      },
      // 业主工商信息
      xyParkOwnerbusinessTable: {
        loading: false,
        dataSource: [],
        columns: []
      },
      // 历史沿革
      xyHistoryTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '时间节点',
            key: 'contacts',
            type: FormTypes.date,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: ''
          },
          {
            title: '企业重大事项描述',
            key: 'contacts2',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          {
            title: '备注',
            key: 'remark',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: ''
          }
        ]
      },
      xyOwnerEquityTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '分类',
            key: 'contacts',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: ''
          },
          {
            title: '权益描述',
            key: 'contacts2',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }]
          },
          {
            title: '备注',
            key: 'remark',
            type: FormTypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: ''
          }
        ]
      },
      url: {
        add: '/community/xyParkOwner/add',
        edit: '/community/xyParkOwner/edit',
        queryById: '/community/xyParkOwner/queryById',
        xyParkOwnercontact: {
          list: '/community/xyParkOwner/queryXyParkOwnercontactByMainId'
        },
        xyHistory: {
          list: '/community/xyParkOwner/queryXyParkOwnerbusinessByMainId'
        },
        xyOwnerEquity: {
          list: '/community/xyParkOwner/queryXyParkOwnerbillinginfoByMainId'
        }
      },
      formData: {
        ownerCode: ''
      }
    }
  },
  props: {
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    }
  },
  methods: {
    async handleOk() {
      Promise.all([
        this.$refs.ruleForm.validate(),
        this.$refs.xyParkOwnerbusinessForm.validateFields(),
        this.$refs[this.refKeys[0]].getValuesSync({ validate: true }),
        this.$refs[this.refKeys[1]].getValuesSync({ validate: true }),
        this.$refs[this.refKeys[2]].getValuesSync({ validate: true })
      ]).then((res) => {
        if (res[2].error || res[3].error || res[4].error) {
          return false
        }
        const data = this.classifyIntoFormData({
          formValue: this.formData,
          tablesValue: [res[1]]
        })
        return this.request(data)
      }).catch(function(reason) {
        console.log(reason)
      })
    },
    addBefore() {
      // this.$refs.ruleForm.resetFields()
      this.xyParkOwnercontactTable.dataSource = []
      this.$refs.xyParkOwnerbusinessForm && this.$refs.xyParkOwnerbusinessForm.clearFormData()
    },
    getAllTable() {
      const values = this.tableKeys.map(key => getRefPromise(this, key))
      return Promise.all(values)
    },
    /** 调用完edit()方法之后会自动调用此方法 */
    editAfter() {
      // this.$refs.ruleForm.resetFields()
      this.model = Object.assign({}, { ownerType: '2' }, this.model)
      const fieldval = pick(this.model, 'idCard', 'ownerCode', 'ownerName', 'contact', 'contactAddr', 'contactTel', 'ownerType', 'ownerTrade', 'annualIncome', 'isLogon', 'isTechnology', 'isRecord', 'file')
      this.formData = fieldval
      this.$nextTick(() => {
        // this.form.setFieldsValue(fieldval)
        this.$refs.xyParkOwnerbusinessForm && this.$refs.xyParkOwnerbusinessForm.initFormData(this.url.xyParkOwnerbusiness.list, this.model.ownerCode)
      })
      // 加载子表数据
      if (this.model.ownerCode) {
        const params = { ownerCode: this.model.ownerCode }
        this.requestSubTableData(this.url.xyParkOwnercontact.list, params, this.xyParkOwnercontactTable)
      }
      this.confirmLoading = false
    },
    /** 整理成formData */
    classifyIntoFormData(allValues) {
      const main = Object.assign(this.model, allValues.formValue)
      if (main.ownerType === '1') {
        main.ownerTrade = ''
        main.annualIncome = ''
        main.isLogon = ''
        main.isTechnology = ''
        main.isRecord = ''
      } else {
        main.idCard = ''
      }
      console.log(main.ownerType)
      return {
        ...main, // 展开
        xyParkOwnercontactList: allValues.tablesValue[0].values,
        xyParkOwnerbusinessList: main.ownerType === '2' ? this.$refs.xyParkOwnerbusinessForm.getFormData() : []
      }
    },
    validateError(msg) {
      this.$message.error(msg)
    }
  }
}
</script>

<style scoped>
</style>
